<template>
	<view>
		<view class="info-main">
			<view class="info-head-item" @click="handleChooseImage">
				<view class="tit">头像</view>
				<view class="operation">
					<image :src="user.portrait ? user.portrait : '/static/images/head.png'"></image>
				</view>
			</view>
			<view class="info-item">
				<view class="tit">姓名</view>
				<view class="operation operation-input">
					<input placeholder="请输入姓名" v-model="user.name"></input>
				</view>
			</view>
			<view class="info-item">
				<view class="tit">性别</view>
				<picker class="operation" bindchange="bindPickerGender" :value="gen" :range="gender">
					<view :class="{'time time-left': true, 'tips-txt': !user.sex}">
						{{user.sex ? user.sex == 1 ? '男' : '女' : '请选择性别'}}
						<text class="iconfontPT iconxiayibu pull-right"></text>
					</view>
				</picker>
			</view>
			<view class="info-item">
				<view class="tit">电话
					<view class="caution-box"><text class="iconfontPT iconzhuyi"></text>请务必填写真实的手机号</view>
				</view>
				<view class="operation operation-input">
					<input placeholder="请输入手机号" maxlength="11" type="number" v-model="user.phone"></input>
				</view>
			</view>
			<view class="info-item">
				<view class="tit">学历</view>
				<picker class="operation" @change="bindPickerChange" :value="index" :range="array">
					<view :class="{'time time-left': true, 'tips-txt': !user.education}">
						{{user.education || '请选择最高学历'}}
						<text class="iconfontPT iconxiayibu pull-right"></text>
					</view>
				</picker>
			</view>
			<view class="info-item">
				<view class="tit">参加工作时间</view>
				<picker class="operation" mode="date" data-name="s_work_time" fields="month" :value="user.s_work_time" @change="onPickerChange">
					<view :class="{'time time-left': true, 'tips-txt': !user.s_work_time}">
						{{user.s_work_time || '请选择参加工作时间'}}
						<text class="iconfontPT iconxiayibu pull-right"></text>
					</view>
				</picker>
			</view>
			<view class="info-item">
				<view class="tit">微信号
					<view class="caution-box"><text class="iconfontPT iconzhuyi"></text>请务必填写真实的微信号</view>
				</view>
				<view class="operation operation-input">
					<input placeholder="请输入微信号" v-model="user.wx"></input>
				</view>
			</view>
			<view class="info-item">
				<view class="tit">出生年月</view>
				<picker class="operation" mode="date" data-name="birthday" fields="month" :value="user.birthday" @change="onPickerChange">
					<view :class="{'time time-left': true, 'tips-txt': !user.birthday}">
						{{user.birthday || '请选择出生年月'}}
						<text class="iconfontPT iconxiayibu pull-right"></text>
					</view>
				</picker>
			</view>
		</view>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref='imageCompress' />
		<btnTpl @confirmEvent="submitEventFn">保存</btnTpl>
	</view>
</template>

<script>
	import btnTpl from '../../components/recruit/btn-tpl.vue'
	import {
		getUserDtlInfo
	} from '../../../apis/recruit/index.js'

	export default {
		data() {
			return {
				uploadImage: false,
				array: ['小学', '初中', '中专', '高中', '大专', '本科', '硕士', '博士'],
				array1: ['牛人', 'Boss'],
				gender: ['男', '女'],
				customItem: '请选择',
				user: {
					name: '-', //
					phone: '', //
					sex: 1, //性别 1男 2 女
					wx: '', // 微信
					education: '', //学历
					s_work_time: '', //工作时间
					birthday: '', //生日
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
					}, {
						min: 2,
						max: 20,
						message: '姓名字符长度在 2 到 20 个字符',
					}],
					phone: [{
						isPhone: true,
						message: '输入正确手机号码',
					}],
					education: [{
						required: true,
						message: '请选择最高学历',
					}],
					s_work_time: [{
						required: true,
						message: '请选择参加工作时间',
					}],
				}
			}
		},
		onShow() {
			if (this.uploadImage) {
				return;
			}
			this.getUserInfo()
		},
		components: {
			btnTpl
		},
		computed: {
			host() {
				return this.$baseHost.car
			}
		},
		methods: {
			// 获取学历
			bindPickerChange(e) {
				this.index = e.detail.value
				this.user.education = this.array[e.detail.value]
			},
			//绑定公共方法
			onPickerChange(e) {
				let key = e.currentTarget.dataset.name,
					value = e.detail.value;
				this.user[key] = value
			},
			// 获取身份
			bindPickerChange1(e) {
				this.index1 = e.detail.value
				this.identity = this.array1[this.index1]
			},
			// 获取性别
			bindPickerGender(e) {
				this.user.sex = e.detail.value == 0 ? 1 : 2
			},
			// 获取参加工作时间
			bindDateChange(e) {
				this.date = e.detail.value
			},
			// 获取出生时间
			bindDateChange1(e) {
				this.date1 = e.detail.value
			},
			getUserInfo() {
				let _this = this;
				getUserDtlInfo().then(res => {
					if (res.code == 1) {
						res.data.s_work_time == 0 && (res.data.s_work_time = '2018-05');
						res.data.birthday == 0 && (res.data.birthday = '1995-05');
						res.data.s_work_time == 1970.01 && (res.data.s_work_time = '2018-05');
						res.data.birthday == 1970.01 && (res.data.birthday = '1995-05');
						_this.user = res.data
					}
				})
			},
			//编辑个人信息
			submitEventFn() {
				let _this = this,
					obj = _this.user;
				_this.$verification(obj, this.rules, ok => {
					if (ok) {
						getUserDtlInfo(_this.user).then(res => {
							if (res.code == 1) {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1,
									})
								}, 1500);
							}
						})
					}
				})
			},
			handleChooseImage() {
				let _this = this
				this.$uploadImage({imageCompressFn: this.$refs.imageCompress.start})
					.then(response => {
						_this.user.portrait = `${this.host}/${response}`
					})
			},
		}
	}
</script>

<style lang="less">
	.info-main {
		padding: 0 30rpx 210rpx 30rpx;
	}

	.info-item {
		padding: 30rpx 0 0;
		border-bottom: 1rpx solid #ccc;
		position: relative;
		overflow: hidden;
	}

	.info-head-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #ccc;
		position: relative;
		overflow: hidden;
	}

	.info-item .tit,
	.info-head-item .tit {
		color: #666;
		font-size: 24rpx;
		line-height: 24rpx;
		position: relative;
	}

	.info-item .operation {
		color: #333;
		font-size: 34rpx;
		line-height: 34rpx;
		margin-top: 22rpx;
		padding-bottom: 30rpx;
	}

	.info-head-item .tit {
		display: inline-block;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #333;
	}

	.info-head-item .operation {
		width: 100rpx;
		height: 100rpx;
		float: right;
		border-radius: 50%;
	}

	.operation.operation-input {
		margin-top: 16rpx;
		padding-bottom: 24rpx;
	}

	.info-head-item .operation image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.caution-box {
		font-size: 24rpx;
		color: #fb830e;
		line-height: 24rpx;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.caution-box .iconfontPT {
		font-size: 24rpx;
		margin-top: 2rpx;
		display: inline-block;
		padding: 0 5rpx 0 0;
		vertical-align: top;
	}

	.tips-txt {
		color: #989898;
	}
</style>
